<template>
  <view class="category">
    <ugo-search></ugo-search>
    <view class="main">
      <view class="menus">
        <view 
          :class="['item',index===currentIndex?'active':'']"
          v-for="(item,index) in menus" 
          :key="item"
          @click="handleIndex(index)"
        >{{item}}</view>
      </view>
      <scroll-view 
        class="goods"
        scroll-y
        :scroll-top="scrollTop"
      >
        <view 
          class="goods-group"
          v-for="item1 in goodsList"
          :key="item1.cat_id"
        >
          <view class="goods-group-title">{{item1.cat_name}}</view>
          <view class="goods-group-content">
            <navigator
              :url="'/pages/goods_list/goods_list?cid='+item2.cat_id" 
              class="goods-item"
              v-for="item2 in item1.children"
              :key="item2.cat_id"
            >
              <image :src="item2.cat_icon"></image>
              <view class="goods-name">{{item2.cat_name}}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      // 接口获取的全部数据
      category:[],
      // 左侧要渲染的标题数组
      menus:[],
      // 右侧要显示的内容数据
      goodsList:[],
      // 左侧侧边栏选中的索引
      currentIndex:0,
      scrollTop:0
    }
  },
  async onLoad(){
    const category = uni.getStorageSync("category")
    // 判断本地存储商品是否有数据
    if(!category) {
      // console.log("没缓存 发送请求");
      this.getCategory()
    }else{
      // console.log("有缓存 准备判断过期时间");
      // 判断本地存储时间是否过期，过期则重新发起请求
      if(Date.now() - category.time > 10 * 1000){
        // console.log("缓存过期了 重新发送请求");
        this.getCategory()
      }else{
        // console.log("缓存没有过期 准备拿缓存的数据来使用");
        this.setCategory(category.data)
      }
    }
    
  },
  methods: {
    // 发起请求 获取商品数据
    async getCategory(){
      const {message} = await uni.$u.http.get("/categories")
      this.setCategory(message)
    },
    // 设置商品分类
    setCategory(message){
      this.category = message
      // 构造左侧的导航栏目数据
      this.menus = this.category.map(item=>item.cat_name)
      // 构造右侧要显示的商品数据
      this.goodsList = this.category[this.currentIndex].children
      // 将商品数据添加到本地存储
      uni.setStorageSync("category",{data:this.category,time:Date.now()})
    },
     // 左侧标题的点击事件
    handleIndex(index){
      this.currentIndex = index
      this.goodsList = this.category[this.currentIndex].children
      // 解决当右侧下滑到底部，点击左侧侧边栏回不到右侧顶部的问题
      // 当scrllTop发送改变才能触发scroll-top属性
      let scrollTop = Math.random()*Math.random()*Math.random()*Math.random()
      if(this.scrollTop === scrollTop){
        scrollTop = scrollTop / 1000
      }
      this.scrollTop = scrollTop
    }
  }
}
</script>

<style lang="scss">
/* 小程序中 100vh 自动帮我们去除掉 tabbar的高度！！ 也去除掉顶部的高度  */
.category{
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main{
    flex: 1;
    display: flex;
    overflow: hidden;
    .menus{
      width: 182rpx;
      overflow: auto;
      .item{
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: #666;
        background-color: #f3f3f3;
        // 这里加这个样式是为了让.active这个类覆盖，不然突然加这个类盒子会抖一下
        border-left: 4rpx solid #f3f3f3;
      }
      .active{
        color: #eb4450;
        border-left: 4rpx solid #eb4450;
      }
    }
    .goods{
      flex: 1;
      overflow: auto;
    }
  }
}
.goods{
  .goods-group{
    .goods-group-title{
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      &::before{
        content: "/";
        margin-right: 15rpx;
      }
      &::after{
        content: "/";
        margin-left: 15rpx;
      }
    }
    .goods-group-content{
      display: flex;
      flex-wrap: wrap;
      .goods-item{
        width: 33.33%;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        image{
          width: 120rpx;
          height: 120rpx;
        }
        .goods-name{
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>